<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <!--固定引用结束,自定义引用添加在下面-->
    <title>JT2</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>
        .userflex-publicAlert-alertTotal {
            margin: 0.28rem 0.32rem 0.32rem 0.32rem;
        }

        .user-publicAlert-redPoint {
            width: 0.16rem;
            height: 0.16rem;
            background: rgba(236, 62, 51, 1);
            border-radius: 0.14rem;
            margin-top: 0.18rem;
        }

        .user-publicAlert-titleMsg {
            color: rgba(34, 34, 34, 1);
            line-height: 0.52rem;
        }

        .user-publicAlert-article {
            margin-left: 0.24rem;
            margin-right: 0.24rem;
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.36rem;
            margin-top: 0.08rem;
            margin-bottom: 0.28rem;
        }

        .user-publicAlert-title {
            margin-left: 0.24rem;
            margin-top: 0.24rem;
            margin-right: 0.24rem;
        }

        .user-publicAlert-iconfanhui {
            margin-left: 0.2rem;
            margin-right: 0.24rem;
            margin-top:  0.23rem;
            color: rgba(153, 153, 153, 1);
        }

        .user-publicAlert-detail {
            margin-top: 0.22rem;
            color: rgba(34, 34, 34, 0.5);
            line-height: 0.34rem;
        }

        .user-publicAlert-updateTime {
            margin-left: 0.24rem;
            margin-top: 0.22rem;
            color: rgba(34, 34, 34, 0.5);
            line-height: 0.34rem;
        }

        .user-publicAlert-line3 {
            border-top: 0.5px solid rgba(242, 242, 242, 1);
            margin-top: 0.22rem;
            margin-bottom: 0.2rem;
        }

        .user-publicAlert-eachInfoTotal {
            margin-bottom: 0.32rem;
        }

        .user-publicAlert-img img {
            width: 6.86rem;
            height: 3.56rem;
        }

        .sys-notice-noMsg img {
            margin-top: 2.62rem;
            width: 5.18rem;
            height: 2.16rem;
        }

        .sys-notice-noMsgText {
            margin-top: 0.14rem;
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.34rem;
        }
    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div class="flex-column ff400 h-100-p">
    <!--头部部分-->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar "></div>
        <!--导航栏-->
        <div class="bg-main nav-bar  flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="flex-row center-bar fs16 ff500">公告通知</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <!--功能模块-->
    <!--单条公告通知-->
    <div class="userflex-publicAlert-alertTotal  flex-column flex-1 scoll-y">
    </div>


</div>
<!--具体代码-->
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<!--固定引用结束-->
<script src="../../js/date.js"></script>
<script src="../../js/api.js"></script>
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
    /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
    function initPage(params) {
      //状态栏自适应
      Utils.sbhAdaptive()
      reLoadPage()
    }

    /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
    function startPage(params) {
      //状态栏自适应
      Utils.sbhAdaptive()
      reLoadPage()
    }

    function reLoadPage() {
      getsysNoticeListCache()
    }

    function goPubAlertDetail(noticeId) {
      //新增用户的阅读日志
      insertMessageReadLogRedis(noticeId)
      //将缓存中的该条数据标为已阅读
      setSysNoticeRead(noticeId)
    }

    //获取缓存中的公告列表
    function getsysNoticeListCache() {
      let htmlStr = ''
      jsBridge.getData('notice_list').then(notice_list => {
        if (notice_list && notice_list.length > 0) {
          $.each(notice_list, function (i, item) {
            let newhtmlStr = ''
            newhtmlStr += '<div class="user-publicAlert-eachInfoTotal bg-white" onclick=goPubAlertDetail("' + item.noticeId + '")>\n'
            if (item.imgUrl !== '' && item.imgUrl.length !== 0) {
              newhtmlStr += '            <div class="user-publicAlert-img"><img src=' + item.imgUrl + '></div>\n'
            }
            newhtmlStr += '            <div class="user-publicAlert-title line1">\n'
            if (item.isRead === '0') {
              newhtmlStr += '                <!--小红点-->\n' +
                                '                <span class="user-publicAlert-redPoint" style="display: inline-block"></span>\n' +
                                '                <!--公告通知标题-->\n' +
                                '                <span class="user-publicAlert-titleMsg ff500 fs15 line1" style="margin-left: 0.16rem"> ' + item.title + '</span>\n'
            } else {
              newhtmlStr += '                <!--公告通知标题-->\n' +
                                '                <span class="user-publicAlert-titleMsg ff500 fs15 line1"> ' + item.title + '</span>\n'
            }

            newhtmlStr += '            </div>\n' +
                            '            <!--公告通知主体-->\n' +
                            '            <div class="user-publicAlert-article fs12 ff400 line2">' + item.msgConnect + '</div>\n' +
                            '            <div class="user-publicAlert-line3 flex-row justify-content-between align-items-center">\n' +
                            '                <!--更新时间-->\n' +
                            '                <div class="user-publicAlert-updateTime ff400 fs12">' + DateUtils.int2TimeDesc(item.updateTime) + '</div>\n' +
                            '                <div class="user-publicAlert-detailTotal flex-row align-items-center">\n' +
                            '                    <div class="user-publicAlert-detail fs12 ff400">查看详情</div>\n' +
                            '                    <div class="user-publicAlert-iconfanhui iconfont iconfanhui fs9"></div>\n' +
                            '                </div>\n' +
                            '            </div>\n' +
                            '        </div>'
            htmlStr = newhtmlStr + htmlStr
            $('.userflex-publicAlert-alertTotal').html(htmlStr)
          })
        } else {
          htmlStr +=
                        `<div class="sys-notice-noMsg flex-row justify-content-center"><img src="../../images/user/messageInfo-noMsg.png"></div>
                        <div class="sys-notice-noMsgText flex-row justify-content-center fs12 ff400">暂无相关内容</div>`
          $('.userflex-publicAlert-alertTotal').html(htmlStr)
        }
      }
      )
    }

    //用户点击公告详情时增加阅读日志
    function insertMessageReadLogRedis(messageId) {
      Server.messageInfo.insertMessageReadLogRedis({
        messageId: messageId,
        messageType: '1'
      }).then(
      )
    }

    //用户点击公告详情后将该公告标为已阅读
    function setSysNoticeRead(noticeId) {
      jsBridge.setSysNoticeRead(noticeId).then()
      //跳转公告详情
      jsBridge.openWindow('html/user/notice-detail.html', {noticeId: noticeId}, {noBar: false})
    }

</script>
</html>